<template>
    这是一个博客
    {{ msg }}
    <!-- Attribute(属性)绑定 -->
        <div v-bind:id="bang">属性绑定</div>
        <div v-bind:cord="bang">自定义属性绑定</div>
        <div :cord="bang">简写(语法糖)的属性绑定</div>
        <div :id>同名简写</div>
        <button :disabled="isOk">布尔型绑定</button>
        <div :="objectOfAttrs">动态绑定多个属性</div>
        <div>表达式绑定{{2+1}}{{ expression() }}</div>
    <!-- Directives(指令) -->
        <div v-if="isyes">if指令，if结果为true</div>
        <div v-else="no">if指令，if结果为false</div>
        <a :href="url">href参数的v-bind指令</a>
        <p v-on:click="fn">click参数的v-on指令，v-on用于监听DOM元素</p>
        <a v-bind:[attributeName]="url">动态参数,attributeName(属性名称可更改) </a>
        <p v-bind:[aaa]="ccc">动态参数,attributeName(属性名称可更改) </p>
        <input type="text" v-model.lazy="name">
        <p>这是双向绑定v-model指令(v-model.lazy解决了频繁触发事件的问题，光标移开时才会触发事件)：</p>
        <h3>{{ name }}</h3>
</template>

<!-- 组合式 -->
<script setup>
    import {ref} from 'vue'
    let msg=ref('文本插值')

    // 绑定使用的变量
        let bang=ref('bangding')
        let id=ref(1)
        let isOk=ref(true)//是否忽略，true忽略 false不忽略
        let objectOfAttrs={
            id:'obj',
            style:'color:red;border:1px solid;width:130px;'
        }
        function expression(){
            return '函数返回值'
        }

    // 指令使用的变量
        let isyes=ref(false) //通过if的结果决定页面显示不同的效果
        let url=ref('这是url')
        let fn=ref(()=>{
            console.log('这是一个绑定点击事件，v-on可以用@代替');        
        })
        let attributeName=ref('href')
        let aaa=ref('style')
        let ccc=ref('color:pink')
        let name=ref('')

</script>

<!-- 选项式 -->
<!-- <script>
export default {
    data(){
        return {msg:'文本插值'}
    }
}
</script> -->